import React,{ useEffect, useState } from 'react'
import Taro, { useDidShow } from '@tarojs/taro'
import { View, Image, Button, Picker } from '@tarojs/components'
import "taro-ui/dist/style/components/icon.scss";
import './index.less'

const typeMap = {
  nickName:'修改昵称',
  password:'修改帐号密码'
}
export default function MineChange(props) {
  const {router} = Taro.getCurrentInstance()
  const type = router.params.type || 'nickName'
  const [info,setInfo] = useState({})
  const [query,setQuery] = useState({})
  useDidShow(()=>{
    setInfo(Taro.getStorageSync('user') || {})
    Taro.setNavigationBarTitle({
      title:'修改昵称'
    })
  })
  const handleSubmit = async () =>{  /// 点击提交数据
    let data = {}
    if(type === 'nickName'){
      data = {
        nickName:query.nickName
      }
    }
    const res = await Taro.$put('/mb/users',data,1)
    if(res.code == '1'){
      if(type === 'nickName'){
        Taro.setStorageSync('user',{
          ...Taro.getStorageSync('user'),
          ...data
        })
        setInfo({...info,...data})
      }
      Taro.showToast({
        title:'修改成功',
        icon:'success'
      })
      setTimeout(()=>{
        Taro.navigateBack()
      },1000)
    }else{
      Taro.showToast({
        title:res.message,
        icon:'none'
      })
    }
  }
  async function handleSubmitPasw(){  /// 点击提交账号密码
    if(query.oldPassword === query.newPassword){
      Taro.$toast('旧密码不能与新密码一致')
      return;
    }
    if(query.newPassword !== query.confirmPassword){
      Taro.$toast('新密码和确认密码不一致')
      return;
    }
    let data = {
      oldPassword:query.oldPassword,
      newPassword:query.newPassword
    }
    Taro.showLoading({title:'加载中...'})
    const res = await Taro.$put('/mb/users/password',data,1)
    if(res.code == '1'){
      Taro.$toast('修改成功','success')
      setTimeout(()=>{
        Taro.navigateBack()
      },1000)
    }else{
      Taro.$toast(res.message)
    }
  }
  return (
    <View className="mine-change">
      {type === 'nickName'?
      <View className="change-card">
        <View className='h2'>{typeMap[type]}</View>
        <View className="card-input">
          <input placeholder="请输入昵称" type="text" onInput={e=>{setQuery({...query,nickName:e.detail.value})}} />
        </View>
        <View className="card-info">4-20个字符，可由中英文、数字、”-”、”_”组成</View>
        <Button className="card-button" onClick={()=>{handleSubmit()}}>保存</Button>
      </View>:null}
      {type === 'password'?
      <View className="change-card" v-if="">
        <View className='h2'>{typeMap[type]}</View>
        <View className="card-input">
          <input className='input' placeholder="请输入旧密码" type="password" onInput={e=>{setQuery({...query,oldPassword:e.detail.value})}} />
        </View>
        <View className="card-input">
          <input className='input' placeholder="请输入新密码" type="password" onInput={e=>{setQuery({...query,newPassword:e.detail.value})}} />
        </View>
        <View className="card-input">
          <input className='input' placeholder="请重复输入新密码" type="password" onInput={e=>{setQuery({...query,confirmPassword:e.detail.value})}} />
        </View>
        <View className="card-info">8-16位英文字母、数字、字符组成（不能是纯数字）</View>
        <View className="card-button" onClick={()=>{handleSubmitPasw()}}>保存</View>
      </View>:null}
    </View>
  )
}